<template>
  <div style="margin-left: 10px">
    <el-button circle class="vxe-button type--button size--mini is--circle" title="导入" @click="dialogVisible=!dialogVisible">
      <i class="vxe-button--icon vxe-icon--upload"></i>
    </el-button>
    <vxe-modal resize width="30%" height="70%" v-model="dialogVisible" :loading="loading">
      <template slot="title">
        <span>文件导入</span>
      </template>
      <template>
        <el-scrollbar class="scrollbar-handle">
          <div style="border: 1px dashed;padding:5px;">
            <div style="text-align: center;">注意事项</div>
            <div>1. 只支持Excel文件导入</div>
            <div>2. 下载模板，按照模板上传文件</div>
          </div>
          <el-divider></el-divider>
          <el-button
            v-if="!isRead"
            type="warning"
            icon="el-icon-download"
            style="float: right;"
            @click="downloadTemplate()"
          >下载模板</el-button>
          <el-upload
            class="uploadShow"
            accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :action="upload"
            :data="datas()"
            :headers="headers()"
            :multiple="multiple"
            :before-upload="(file)=>{this.loading = true;}"
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-remove="((file, fileList)=>{return false})"
          >
            <el-button v-if="!isRead" type="primary" icon="el-icon-upload" style="float: left;">上传文件</el-button>
          </el-upload>
        </el-scrollbar>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    //多文件上传
    multiple: {
      type: Boolean,
      default: false,
    },
    //能否上传
    isRead: {
      type: Boolean,
      default: false,
    },
    //导入配置
    importConfig: {
      type: Object,
      default() {
        return {
          url: "",
          params: {},
        };
      },
    },
    //导出配置
    exportConfig: {
      type: Object,
      default() {
        return {
          url: "",
          params: {},
        };
      },
    },
  },

  data() {
    return {
      dialogVisible: false,
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["root","token"]),
    //上传路径
    upload() {
      return this.root + this.importConfig.url;
    },
  },
  methods: {
    //Http请求Headers
    headers() {
      const object = {
        Authorization: "Bearer " +this.token,
      };
      return object;
    },
    //上传附带参数
    datas() {
      return this.importConfig.params;
    },
    //上传成功后
    handleSuccess(res, file, fileList) {
      this.loading = false;
      //提示
      this.$message.success(res.msg);
    },
    //上传失败后
    handleError(err, file, fileList) {
      this.loading = false;
      let res = JSON.parse(err.toString().replace("Error:", ""));
      //提示
      this.$message({
        showClose: true,
        duration: 0, //不自动关闭
        message: res.msg,
        type: "error",
      });
      //下载错误标注文件
      if (res.data) {
        this.util.downloadFile("adminApi/Utility/DownImportErrorFile", {
          VirtualPath: res.data,
        });
      }
    },
    //下载模板
    downloadTemplate() {
        this.loading = true;
        this.util.downloadFile(this.exportConfig.url, this.exportConfig.params)
        .then((res) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.uploadShow {
}
</style>
